<template>
    <el-container class="jxc_stock_inbill_report_container">
        <el-main>
            <el-card class="box-card">
                <headerTemplate
                    slot="header"
                    ref="header"
                    :table-ref="tableOptions.ref"
                    :toolbar_buttons="headerOption.toolbar_buttons"
                    :toolbar_filter="headerOption.toolbar_filter"
                    :searchForm="searchForm"
                    :isSearchInput="false"
                    @event="handleHeaderEvent">
                    <template slot="right_search">
                        <el-form-item label="仓库" style="margin-top: 4px; margin-bottom: 4px;">
                            <el-select v-model="searchForm.warehouse_sid" placeholder="请选择仓库"
                                       @change="getList(true)" clearable style="width: 100%;">
                                <el-option v-for="(item, index) in wareHouseList"
                                           :key="index" :label="item.name" :value="item.sid"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="月份" style="margin-top: 4px; margin-bottom: 4px;">
                            <el-date-picker
                                v-model="searchForm.yyyy_mm"
                                type="monthrange"
                                range-separator="至"
                                start-placeholder="开始月份"
                                end-placeholder="结束月份"
                                value-format="yyyy-MM"
                                format="yyyy年MM月"
                            />
                        </el-form-item>
                    </template>
                </headerTemplate>
                <vxeTableTemplate
                    ref="xTable"
                    :data="dataList"
                    :options="tableOptions"
                    @handleChangePage="handleChangePage"
                />
            </el-card>
        </el-main>
    </el-container>
</template>

<script>
import poiApi from "@common/api/poiApi";
import provide from "@common/mixins/provide";

export default {
    extends: provide,
    name: "JxcStockInbillReport",
    data() {
        let _this = this;
        return {
            headerOption: {
                toolbar_buttons: [
                    {
                        id: 'refresh',
                        icon: 'el-icon-refresh-right',
                        show: true,
                        method: () => {
                            _this.getList();
                        },
                    },
                    {
                        id: 'export',
                        icon: "el-icon-download",
                        type: 'primary',
                        label: '导出',
                        class: 'export_btn',
                        show: true,
                        method: () => {
                            _this.handleExport();
                        },
                    },
                ],
                toolbar_filter: [
                    { type: "text", field: "goods_code", label: "物料编号" },
                    { type: "text", field: "goods_name", label: "物料名称" },
                ],
            },
            searchForm: {},
            dataList: [],
            tableOptions: {
                ref: "JxcStockInbillReportTable",
                container: ".jxc_stock_inbill_report_container",
                multiSelect: false,
                showSummary: true,
                summaryArray: ["total_in_qty", "total_in_amount"],
                columns:[
                    {
                        label: '月份',
                        prop: 'yyyy_mm',
                        align: 'center',
                        minWidth: 100,
                        formatter: (row, column, scope) => _this.formatterDate(row, column, scope, 'yyyy-MM'),
                    },
                    {
                        label: '物料编号',
                        prop: 'goods_code',
                        align: 'center',
                        minWidth: 100,
                    },
                    {
                        label: '物料名称',
                        prop: 'goods_name',
                        align: 'center',
                        minWidth: 100,
                    },
                    {
                        label: '仓库',
                        prop: 'warehouse_name',
                        align: 'center',
                        minWidth: 100,
                    },
                    {
                        label: '规格',
                        prop: 'goods_specifications',
                        align: 'center',
                        minWidth: 200,
                        render: (h, {row}) => {
                            if (row.goods_specifications) {
                                let specificationArr = JSON.parse(row.goods_specifications);
                                let arr = specificationArr.map(item => {
                                    return h("el-tag", {
                                        style: {
                                            'margin-right': '5px',
                                        },
                                        props: {},
                                    }, `${item.specification}：${item.value}`);
                                });
                                return h('div', {}, arr);
                            } else {
                                return h('div', {});
                            }
                        },
                    },
                    {
                        label: '待入库数',
                        prop: 'un_in_qty',
                        align: 'center',
                        minWidth: 100,
                    },
                    {
                        label: '待入库金额',
                        prop: 'un_in_amount',
                        align: 'center',
                        minWidth: 100,
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                    {
                        label: '已入库数',
                        prop: 'in_qty',
                        align: 'center',
                        minWidth: 100,
                    },
                    {
                        label: '已入库金额',
                        prop: 'in_amount',
                        align: 'center',
                        minWidth: 100,
                        formatter: (row, column, scope) => _this.formatterAmount(row, column, scope, 2),
                    },
                ],
                operates: false,
                pagination: {
                    pageIndex: 1,
                },
            },
            wareHouseList: [],
        };
    },
    mounted() {
        this.initPage();
        this.getWarehouseList();
    },
    methods: {
        // 初始化
        initPage() {
            let _this = this;
            if (!_this.searchForm.yyyy_mm || _this.searchForm.length === 0) {
                _this.beforeThree();
            }
            _this.getList(true);
        },
        // 刷新、查询
        handleHeaderEvent(event) {
            let _this = this;
            _this.searchForm = $.extend({}, _this.searchForm, event.searchForm);
            if (event.type === "search") {
                _this.initPage();
            } else if (event.type === "refresh") {
                _this.initPage();
            }
        },
        // 仓库
        getWarehouseList() {
            const _this = this;
            _this.fetchData(_this.$api.API_FindJxcStockWarehouses, {
                nopage: '1',
            }).then(res => {
                _this.wareHouseList = (res.data || []);
            }).catch(() => {
            });
        },
        // 选择页
        handleChangePage(page) {
            let _this = this;
            _this.tableOptions.pagination.pageIndex = page.pageIndex;
            _this.tableOptions.pagination.pageSize = page.pageSize;
            _this.getList(true);
        },
        // 获取列表信息
        getList(query) {
            let _this = this;
            if (query) {
                _this.tableOptions = _this.resetTablePagination(_this.tableOptions);
            }
            let queryData = _this.getQueryParams(_this.tableOptions, _this.searchForm);
            _this.fetchData(_this.$api.API_FindStockInbillReportListByPage, queryData).then(result => {
                _this.dataList = result.data || [];
                _this.tableOptions = _this.setTableTotal(_this.tableOptions, result);
            }).catch(() => {

            });
        },
        // 获取前三个月
        beforeThree() {
            const dates = new Date();
            let endMM = this.$utils.formatDate(dates, 'yyyy-MM');
            dates.setMonth(dates.getMonth() - 3)
            let pastMonth = dates.getMonth() + 1
            let pastDay = dates.getDate()
            if (pastMonth >= 1 && pastMonth <= 9) {
                pastMonth = '0' + pastMonth
            }
            if (pastDay >= 0 && pastDay <= 9) {
                pastDay = '0' + pastDay
            }
            const endDate = dates.getFullYear() + '-' + pastMonth + '-' + pastDay;
            let beginMM = this.$utils.formatDate(endDate, 'yyyy-MM');
            this.searchForm = $.extend({}, this.searchForm, {yyyy_mm: [beginMM, endMM]});
            return endDate
        },
        // 导出Excel
        handleExport() {
            const _this = this;
            let queryData = _this.getQueryParams(_this.tableOptions, _this.searchForm);
            let templateName = _this.$api.EXPORT_TEMPLATE_NAME_STOCK_INBILL;
            let outputName = '入库报表';
            let url = _this.$api.API_FindStockInbillReportListByPage;
            poiApi.exportExcelTemplate(templateName, url, queryData, outputName, {}, undefined, 1, 100, false, true);
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.jxc_stock_inbill_report_container {
    /deep/ .el-date-editor .el-range-separator {
        padding: 0 5px;
        line-height: 21px;
        width: 6%;
        color: #303133;
    }
}
</style>
